<!-- 用户编辑表单 -->
<template>
  <q-card style="width: 480px">
    <!-- 标题 -->
    <q-toolbar>
      <q-toolbar-title>{{ title }}</q-toolbar-title> <q-btn v-close-popup icon="close" round flat />
    </q-toolbar>
    <q-separator />

    <!-- 内容 -->
    <q-card-section style="min-height: 250px">
      <q-form ref="formRef" class="row q-col-gutter-x-md">
        <q-input v-model="dto.username" label="用户名" class="col-6" :rules="[required, minLength(3)]" :readonly="readonly || isEdit" />
        <q-tree-select
          v-model="dto.deptId"
          label="所属部门"
          :nodes="deptOptions"
          node-key="deptId"
          label-key="deptName"
          class="col-6"
          :rules="[required]"
          :readonly="readonly"
        />

        <q-input v-model="dto.nickname" label="昵称" class="col-6" :rules="[required]" :readonly="readonly" />
        <q-input v-model="dto.cellphone" label="手机号码" class="col-6" :rules="[required, telephone]" :readonly="readonly" />

        <q-field v-model="dto.gender" label="性别" class="col-6" :rules="[required]" :disable="readonly" stack-label>
          <template #control>
            <q-option-group v-model="dto.gender" :options="genderOptions" inline dense />
          </template>
        </q-field>

        <q-field class="col-6" label="状态" :disable="readonly" stack-label>
          <template #control>
            <q-option-group v-model="dto.disabled" :options="disableOptions" inline dense />
          </template>
        </q-field>

        <q-select
          v-model="dto.roleIds"
          label="角色"
          class="col-12 q-mb-sm"
          :options="roleOptions"
          :readonly="readonly"
          multiple
          map-options
          emit-value
        />
      </q-form>
    </q-card-section>
    <q-separator />

    <!-- 操作 -->
    <q-card-actions v-if="!readonly">
      <q-checkbox v-model="closeAfterSave" label="保存后关闭" />
      <q-space />
      <q-btn v-close-popup>取消</q-btn>
      <q-btn color="primary" icon="save" :disable="loading" @click="handleSubmit">保存</q-btn>
    </q-card-actions>
  </q-card>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { useCrudForm, genderOptions, disableOptions } from 'src/composables';

  import { minLength, required, telephone } from 'src/utils/validator';
  import { getRoleOptions } from 'src/api/system/role';
  import { DeptDto, getDeptTree } from 'src/api/system/dept';
  import crudApi, { UserDto } from 'src/api/system/user';

  // 属性和事件定义
  const props = defineProps({
    id: { type: [String, Number], default: undefined },
    title: { type: String, default: '用户表单' },
    readonly: { type: Boolean, default: false },
    deptId: { type: [Number, String], default: null },
  });
  const emit = defineEmits(['close', 'after-save']);

  // 表单数据
  const emptyUser = { deptId: props.deptId, roleIds: [] as IdType[], disabled: false } as UserDto;
  const { formRef, dto, isEdit, closeAfterSave, loading, handleSubmit } = useCrudForm<UserDto>(crudApi, emptyUser, props, emit);

  const roleOptions = ref<SelectOption[]>([]);
  const deptOptions = ref<DeptDto[]>([]);
  onMounted(() => {
    getRoleOptions().then((data) => (roleOptions.value = data));
    getDeptTree().then((data) => (deptOptions.value = data));
  });
</script>

<style lang="scss" scoped></style>
